<template>
  <div id="mapContainer"></div>

  <div class="card">
    经度：{{ datas.position.lng.toFixed(2) }}°，纬度：{{
      datas.position.lat.toFixed(2)
    }}°，高度：{{ datas.position.height.toFixed(2) }}米， 镜头高度：{{
      datas.position.cameraHeight.toFixed(2)
    }}米，俯仰角度：{{ datas.position.pitch.toFixed(0) }}°，偏航角度：{{
      datas.position.heading.toFixed(0)
    }}°，翻滚角度：{{ datas.position.roll.toFixed(0) }}°
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import * as Cesium from "cesium";
import { useCesium } from "../composables";
const { initViewer } = useCesium("mapContainer");

interface Pos {
  lng: number;
  lat: number;
  height: number;
  cameraHeight: number;
  roll: number;
  heading: number;
  pitch: number;
}

const datas = reactive<{
  position: Pos;
}>({
  position: {
    lng: 0,
    lat: 0,
    height: 0,
    cameraHeight: 0,
    roll: 0,
    heading: 0,
    pitch: 0,
  },
});

const handleDegrees = (num: number) => {
  if (num >= 360) {
    num = num - 360;
  }
  return num;
};

onMounted(() => {
  const viewer = initViewer();

  let timer: any = null;

  const handler = viewer.screenSpaceEventHandler!;
  handler.setInputAction((evt: any) => {
    if (timer) {
      return;
    } else {
      timer = setTimeout(() => {
        const position = evt.endPosition;
        const ray = viewer.camera.getPickRay(position);
        const c = viewer.scene.globe.pick(ray!, viewer.scene);
        if (c) {
          const car = Cesium.Cartographic.fromCartesian(c);
          const lat = Cesium.Math.toDegrees(car.latitude);
          const lng = Cesium.Math.toDegrees(car.longitude);
          const height = car.height;
          // const cameraPosition = viewer.camera.positionCartographic;
          datas.position.lng = lng;
          datas.position.lat = lat;
          datas.position.height = height;

          // datas.position = {
          //   lng,
          //   lat,
          //   height,
          //   cameraHeight: cameraPosition.height,
          //   roll: Cesium.Math.toDegrees(viewer.camera.roll),
          //   heading: Cesium.Math.toDegrees(viewer.camera.heading),
          //   pitch: Cesium.Math.toDegrees(viewer.camera.pitch),
          // };
        }
        clearTimeout(timer);
        timer = null;
      }, 80);
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  viewer.camera.changed.addEventListener((evt) => {
    const position = viewer.camera.positionCartographic;
    datas.position.cameraHeight = position.height;
    datas.position.roll = handleDegrees(Cesium.Math.toDegrees(viewer.camera.roll));
    datas.position.heading = handleDegrees(
      Cesium.Math.toDegrees(viewer.camera.heading)
    );
    datas.position.pitch = handleDegrees(
      Cesium.Math.toDegrees(viewer.camera.pitch)
    );

    // console.log(position.height);
  });
});
</script>

<style scoped lang="less">
#mapContainer {
  height: 100vh;
}
.card {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.68);
  color: white;
  z-index: 99;
  text-align: right;
  padding: 0 30px;
  box-sizing: border-box;
}
</style>
